<template>
  <div class="balance-report">
    <!-- 储值统计 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6">
        <el-statistic title="累计充值金额" :value="totalRecharge" prefix="¥" :precision="2" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="累计消费金额" :value="totalConsumption" prefix="¥" :precision="2" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="当前余额总计" :value="totalBalance" prefix="¥" :precision="2" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="余额使用率" :value="usageRate" suffix="%" :precision="1" />
      </el-col>
    </el-row>

    <!-- 储值趋势 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>💰 储值变化趋势</span>
      </template>
      <div class="chart-container" ref="balanceTrendChart"></div>
    </el-card>

    <!-- 充值排行和分布 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🏆 充值排行榜 TOP 10</span>
          </template>
          <el-table :data="topRechargers" max-height="350">
            <el-table-column type="index" label="排名" width="60" />
            <el-table-column prop="memberName" label="会员姓名" width="120" />
            <el-table-column prop="rechargeAmount" label="充值金额" width="120">
              <template #default="{ row }">
                <span style="color: #67c23a; font-weight: bold;">¥{{ row.rechargeAmount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="balance" label="余额" width="100">
              <template #default="{ row }">
                ¥{{ row.balance.toLocaleString() }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📊 充值金额分布</span>
          </template>
          <div class="chart-container" ref="rechargeDistChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 储值明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 储值明细数据</span>
      </template>
      <el-table :data="balanceData" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="totalRecharge" label="累计充值" width="120">
          <template #default="{ row }">
            <el-tag type="success">¥{{ row.totalRecharge.toLocaleString() }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption" label="累计消费" width="120">
          <template #default="{ row }">
            <el-tag type="warning">¥{{ row.totalConsumption.toLocaleString() }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="当前余额" width="120">
          <template #default="{ row }">
            <span style="font-weight: bold; color: #409eff;">¥{{ row.balance.toLocaleString() }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lastRecharge" label="最近充值" width="160" />
        <el-table-column prop="rechargeCount" label="充值次数" width="100" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const totalRecharge = ref(25678900)
const totalConsumption = ref(18765432)
const totalBalance = ref(6913468)
const usageRate = ref(73.1)

const topRechargers = ref([
  { memberName: '张三', rechargeAmount: 125000, balance: 34567 },
  { memberName: '李四', rechargeAmount: 98000, balance: 28900 },
  { memberName: '王五', rechargeAmount: 87000, balance: 23456 }
])

const balanceData = ref([
  { memberName: '张三', phone: '13800138001', totalRecharge: 125000, totalConsumption: 90433, balance: 34567, lastRecharge: '2024-01-15 14:30', rechargeCount: 23 },
  { memberName: '李四', phone: '13800138002', totalRecharge: 98000, totalConsumption: 69100, balance: 28900, lastRecharge: '2024-01-18 10:15', rechargeCount: 18 }
])

const balanceTrendChart = ref(null)
const rechargeDistChart = ref(null)

onMounted(() => {
  initBalanceTrendChart()
  initRechargeDistChart()
})

const initBalanceTrendChart = () => {
  const chart = echarts.init(balanceTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['充值金额', '消费金额', '余额总计'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '充值金额',
        type: 'bar',
        data: [345678, 389012, 412345, 378900, 425678, 458900, 489012],
        itemStyle: { color: '#67c23a' }
      },
      {
        name: '消费金额',
        type: 'bar',
        data: [267890, 298765, 321098, 289012, 334567, 367890, 389012],
        itemStyle: { color: '#e6a23c' }
      },
      {
        name: '余额总计',
        type: 'line',
        data: [5678900, 5769147, 5860394, 5950282, 6041393, 6132403, 6233403],
        itemStyle: { color: '#409eff' }
      }
    ]
  })
}

const initRechargeDistChart = () => {
  const chart = echarts.init(rechargeDistChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '充值金额',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 8765, name: '100-500元' },
          { value: 6543, name: '500-1000元' },
          { value: 4321, name: '1000-5000元' },
          { value: 2345, name: '5000-10000元' },
          { value: 1234, name: '10000元以上' }
        ]
      }
    ]
  })
}
</script>

<style scoped>
.balance-report {
  padding: 20px 0;
}

.stat-row {
  padding: 20px;
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
}

.chart-container {
  height: 350px;
}
</style>

